<template>
    <el-card>
      <div class="info">
          <button  @click="back" class="btn">back</button>
          <h1>{{list.city}}学生工作信息</h1>
          <el-table  border :data="com2"  height="250" stripe fit size="small" >
            <el-table-column prop="id" label="id" align="center" v-if="false"></el-table-column>
            <el-table-column fixed prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="years" label="毕业年份" align="center"></el-table-column>
            <el-table-column prop="job" label="职业" align="center"></el-table-column>
            <el-table-column prop="salary2" label="薪水(w)"  align="center"></el-table-column>
            <el-table-column prop="state_text" label="求职状态" align="center"></el-table-column>
            <el-table-column prop="province" label="工作省份/直辖市/自治区" align="center"></el-table-column>
            <el-table-column prop="city" label="工作城市" align="center"></el-table-column>
          </el-table>
          <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5,10,15,20,50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      </div>
    </el-card>
  </template>
  <script setup>
  import {useRoute, useRouter} from 'vue-router'
  import {computed, onMounted,reactive,ref} from 'vue'
  import {Cityinfo} from '@/api/api'
  const router= useRouter()
  const back=function(){ 
    router.push({name: '城市地图'})
  }
  const total = ref(100)
    let list=reactive({
      compData:[],
      city:''
    })
  const currentPage4 = ref(1)//当前页数
  const pageSize4 = ref(5)//每页显示条目个数，支持 v-model 双向绑定
  const small = ref(false)
  const background = ref(false)
  const disabled = ref(false)
  onMounted(()=>{
      getinfo()
    })
  const getinfo=async()=>{
    list.city=useRoute().params.cityname2
    const res=await  Cityinfo({cityname:useRoute().params.cityname2})
    console.log("市--毕业生信息",res.data.cityInfo)
    list.compData=res.data.cityInfo
    list.compData.forEach(item=>{
            console.log('年份',item.years)
            item.years=item.years.split('-',1)
            item.state==="1"?item.state_text='已工作':item.state==="2"?item.state_text='求职中':item.state_text='未工作'
          })
    total.value=res.data.total
  }
    //前端分页功能
   const com2=computed(()=>{
       // 规律slice（  (当前页数-1)*每页条数   ，  当前页数*每页条数  ）
       return  list.compData.slice((currentPage4.value-1)*pageSize4.value,currentPage4.value*pageSize4.value)
    })
   //改变每页显示多少条
  const handleSizeChange = (val) => {
    pageSize4.value=val
    currentPage4.value=1
    console.log(`每页显示${val}条 `)
  }
  //改变当前页
  const handleCurrentChange = (val) => {
    currentPage4.value=val
    console.log(`当前页: ${val}`)
  }
  </script>
  
  <style lang="less" scoped>
  
      .el-card{
          width:80%;
          margin:auto;
          .info{
            width:100%;
          margin:auto;
  
          }
          .btn{
            margin-left:-500px;
            border-radius: 10px;
          }
      }
  
  </style>
  